<template>
  <div class="wrap">
    <a-card class="card account-with-draw-wrap" :bordered="false">
      <a-form style="max-width: 800px; margin: 40px auto 0;" :form="form">
        <a-alert
          type="warning"
          showIcon
          :closable="false"
          message="1.开户名必须与认证的个人姓名/企业名称一致。"
          description="2.填写的账号必须与开户名对应，否则可能会因此而造成无法成功收到提现所得钱款！"
          style="margin-bottom: 24px;"
        />

        <a-form-item label="账号类型" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
          <a-select value="1" placeholder="选择收款账户">
            <a-select-option value="1">支付宝</a-select-option>
            <!-- <a-select-option value="2">微信</a-select-option> -->
            <!-- <a-select-option value="3>银行卡</a-select-option> -->
          </a-select>
        </a-form-item>

        <a-form-item label="开户行" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
          <a-radio-group defaultValue="001" size="large">
            <a-radio-button value="001">
              <div class="card-item">
                <img src="~@/assets/icon-alipay-logo.png" class="icon-logo" />
                <span>支付宝</span>
              </div>
            </a-radio-button>
            <!-- <a-radio-button value="b">
            <div class="card-item">
              <img src="~@/assets/icon-wechat-logo.png" class="icon-logo" />
              <span>微信</span>
            </div>
            </a-radio-button>-->
          </a-radio-group>
        </a-form-item>

        <a-form-item label="收款人姓名" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
          <a-input
            placeholder="请填写开户人真实姓名"
            v-decorator="[
              'realName',
              {
                rules: [{ required: true, message: '请输入开户人姓名' }],
                validateTrigger: ['blur']
              }
            ]"
          >
            <a-icon type="user" slot="prefix" />
          </a-input>
        </a-form-item>

        <a-form-item label="收款账号" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
          <a-input
            placeholder="请填写开户账号"
            v-decorator="[
              'account',
              {
                rules: [{ required: true, message: '请输入开户账号' }, { validator: this.checkPayeeAct }],
                validateTrigger: ['blur']
              }
            ]"
          >
            <a-icon type="credit-card" slot="prefix" />
          </a-input>
        </a-form-item>

        <a-form-item :wrapperCol="{ span: 19, offset: 5 }">
          <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card :bordered="false">
      <s-table :columns="columns" :data="loadData" ref="table">
        <template slot="withdrawType" slot-scope="text">
          <span>{{ text | withdrawTypeFilter }}</span>
        </template>
      </s-table>
    </a-card>
  </div>
</template>

<script>
import DictData from '@/config/dict.conf'
import STable from '@/components/table/'
import { getIncomeActList, checkIncomeAct, addIncomeAct } from '@/api/api'
import { pageQueryConvert } from '@/utils/util'

export default {
  name: 'CreateWithDraw',
  components: {
    STable
  },
  data() {
    return {
      form: this.$form.createForm(this),

      //过滤条件
      isorter: {
        column: 'createTime',
        order: 'desc'
      },

      columns: [
        {
          title: '序号',
          dataIndex: 'id'
        },
        {
          title: '添加日期',
          dataIndex: 'createTime'
        },
        {
          title: '账号类型',
          dataIndex: 'withdrawType',
          scopedSlots: { customRender: 'withdrawType' }
        },
        {
          title: '收款账号',
          dataIndex: 'payeeAct'
        },
        {
          title: '收款姓名',
          dataIndex: 'payeeName'
        },
        {
          title: '银行编码',
          dataIndex: 'bankId'
        },
        {
          title: '开户行',
          dataIndex: 'bankName'
        }
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        let params = Object.assign({}, parameter, this.isorter)

        return getIncomeActList(params).then(res => {
          return pageQueryConvert(res)
        })
      }
    }
  },
  filters: {
    /**
     * 账号类型：结算方式过滤
     */
    withdrawTypeFilter(text) {
      let withdrawTypeList = DictData.withDrawType || []
      let txt = ''
      for (let c in withdrawTypeList) {
        let ct = withdrawTypeList[c]
        if (ct.val == text) {
          txt = ct.name
          break
        }
      }
      return txt
    }
  },
  methods: {
    resetForm() {
      this.form.resetFields()
    },

    /**
     * 校验收款账户
     */
    handlePayeeActCheck(value) {
      return new Promise((resolve, reject) => {
        if (!value) {
          reject('账号不能为空')
          return
        }

        var params = {
          payeeAct: value
        }

        checkIncomeAct(params)
          .then(res => {
            if (res.code == 0) {
              resolve()
            } else {
              reject('收款账号已存在')
            }
          })
          .catch(err => reject('校验收款账号失败'))
      })
    },

    /**
     * 校验收款账户入口
     */
    checkPayeeAct(rule, value, callback) {
      if (value.length == 0) {
        callback()
        return
      }

      this.handlePayeeActCheck(value)
        .then(res => {
          callback()
        })
        .catch(err => {
          callback(err || '校验收款账号失败')
        })
    },

    /**
     * 表格刷新
     */
    tableRefresh() {
      let params = Object.assign({}, { pageNo: 1, pageSize: 10 }, this.isorter)
      this.$refs.table.loadData(params, {}, null)
    },

    onSubmit(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          var incomeAct = {
            // 暂时写死：只有支付宝
            withdrawType: '1',
            bankId: '001',
            bankName: '支付宝',
            payeeName: values.realName,
            payeeAct: values.account
          }

          addIncomeAct(incomeAct).then(res => {
            if (res.code != 0) {
              this.addIncomeActFailed(res.msg)
            } else {
              this.resetForm()
              this.$notification['success']({ message: '操作成功', description: '添加收款账户成功', duration: 3 })
              this.tableRefresh()
            }
          })
        }
      })
    },

    addIncomeActFailed(msg) {
      this.$notification['error']({
        message: '新增失败',
        description: msg,
        duration: 2
      })
    }
  }
}
</script>

<style scoped lang="scss">
.card {
  margin-bottom: 24px;
}

.ant-tag {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.icon-logo {
  width: 26px;
  height: 26px;
  margin-right: 10px;
  margin-left: 10px;
}

.card-item {
  display: flex;
  align-items: center;
  font-size: 16px;
}
</style>

<style lang="scss">
.account-with-draw-wrap {
  .ant-alert-description {
    color: rgba(0, 0, 0, 0.85) !important;
    font-size: 16px !important;
  }
}
</style>
